<!DOCTYPE html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>Ghostclick</title>
    <script src="../../../webcomponentsjs/webcomponents.js"></script>
    <script src="../../polymer-gestures.js"></script>
    <style>
      #result {
        height: 200px;
        width: 200px;
        background: green;
      }
      #result.fail {
        background: red;
      }
      pre {
        white-space: pre-wrap;
      }
      label {
        display: inline-flex;
        justify-content: middle;
      }
      label > input {
        padding-left: 20px;
      }
    </style>
  </head>
  <body onclick="">
  <pre>Tap the gray box with touch. If the screen turns green, the test passed. If it turns red, the test failed.</pre>
  <label>Remove? <input id="remove" type="checkbox"></label>

  <br>
  <br>

  <div id="container"></div>
  <template>
    <style>
      a {
        opacity: 1;
        width: 100%;
        height: 200px;
        box-sizing: border-box;
        text-decoration: none;
        transform: translate3d(0, 0, 0);
        display: flex;
        display: -webkit-flex;
      }
    </style>
    <a href="#">
      <div id="box" style="height:200px; width:200px; background: gray;" onclick=""></div>
    </a>
  </template>
  <pre id="output"></pre>
  <script>
    var result = document.createElement('div');
    result.id = 'result';

    function test() {
      if (!result.parentNode) {
        document.body.appendChild(result);
      }
    }

    function fail() {
      test();
      result.className = 'fail';
    }
    window.addEventListener('error', fail);

    var output = document.getElementById('output');
    function log(s) {
      output.textContent += s + '\n';
    }

    var remove = document.getElementById('remove');
    remove.addEventListener('click', function(ev) {
      ev.stopPropagation();
    });

    pgae = PolymerGestures.addEventListener.bind(PolymerGestures);

    var container = document.getElementById('container');
    var template = document.querySelector('template');

    var sr = container.createShadowRoot();
    sr.appendChild(template.content.cloneNode(true));

    var box = sr.getElementById('box');
    var a = box.parentNode;

    var wasClicked = false;

    pgae(a, 'click', function() {
      log('a click');
      wasClicked = true;
    });

    pgae(document.body, 'click', function() {
      log('body click');
      if (!box.parentNode) {
        fail();
      }
    });

    pgae(box, 'tap', function() {
      log('box tap, remove');
      if (remove.checked) {
        box.parentNode.removeChild(box);
      }
    });

    pgae(a, 'tap', function(ev) {
      log('a tap');
      setTimeout(function() {
        if (!wasClicked && box.parentNode) {
          fail();
        } else {
          test();
        }
      }, 1000);
    });
  </script>
</body>
</html>
